﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>여러가지 효과 동시 처리</title>

    <style type="text/css">
    #my .hover 
    {
        cursor:pointer;
        background-color:Yellow;
    }
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

        	$("#moreRegion").hide();
        	$("#moreRegion").click(function(){
        		$("#moreRegion").animat({
        			
        		
        		.height: '200px', width: 'show' , opacity: 'show'},'slow');
        	
        	$(this).hide('fast');

        });
        });
    </script>

</head>

<body>

<div class="region">
안녕하세요. 여기는 본문입니다.
<span class="more">more...</span>
</div>

<div id="moreRegion" style="height:100px; background-color:Yellow;">
또 만나요
</div>

</body>

</html>
